<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>dhtmlxGrid. Big Grid</title>
	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
	<script src="../../codebase/dhtmlxcommon.js"></script>
	<script src="../../codebase/dhtmlxgrid.js"></script>
	<script src="../../codebase/dhtmlxgridcell.js"></script>
	<script src="../../codebase/ext/dhtmlxgrid_srnd.js"></script>
	<script>
		var gridQString = "";
	    function applyFilter(){
		    mygrid.clearAll();
			gridQString = "getGridRecords.php?name_mask="+document.getElementById("nm_mask").value
		    mygrid.loadXML(gridQString);
		}
		function sortGridOnServer(ind,gridObj,direct){
			mygrid.clearAll();
			mygrid.loadXML(gridQString+(gridQString.indexOf("?")>=0?"&":"?")+"orderby="+ind+"&direct="+direct);
			mygrid.setSortImgState(true,ind,direct);
			return false;
		}
	</script>
</head>

<body>
<H1>dhtmlxGrid. Step-by-step guide. Big Grid</H1>

<div><a href="ch_biggrid.html">Step-by-step instructions</a></div>
<br><br>
	<input type="Text" id="nm_mask">
	<input type="Button" value="Filter" onclick="applyFilter()">

    <div id="products_grid" style="width:500px;height:200px;"></div>
    <script>
        var mygrid = new dhtmlXGridObject('products_grid');
        mygrid.setImagePath("codebase/imgs/");
        mygrid.setHeader("Product Name,Internal Code,Price");
        mygrid.setInitWidths("*,150,150");
        mygrid.setColAlign("left,left,right");
		mygrid.setSkin("modern");
		mygrid.setColSorting("server,server,server");
		mygrid.init();
		mygrid.enableSmartRendering(true);
		gridQString = "getGridRecords.php";
		mygrid.loadXML(gridQString);
		mygrid.attachEvent("onBeforeSorting",sortGridOnServer)
        
    </script>

<p>&copy; DHTMLX LTD, 2008</p>

</body>
</html>
